<!DOCTYPE html>

<html lang="en-us"><head>
  <meta charset="utf-8">
  <title>关于我</title>
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="This is meta description">
  <meta name="generator" content="Hugo 0.74.3" />

  <!-- plugins -->
  
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="plugins/slick/slick.css">

  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css" media="screen">

  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon.png" type="image/x-icon">

  <meta property="og:title" content="Reader | Hugo Personal Blog Template" />
  <meta property="og:description" content="This is meta description" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:updated_time" content="2020-03-15T15:40:24+06:00" />
</head>
<body>
 <!-- navigation -->
 <!-- navigation -->
 <header class="navigation">
  <div class="container" id="index">
    <nav class="navbar navbar-expand-lg navbar-white">
      <a class="navbar-brand order-1" href="index.html">
        <img class="img-fluid" width="50px" src="images/图标.png"
          alt="中国传统文化论坛">
      </a>
      <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item @@about__active">
            <a class="nav-link" href="BBS_index.html">论坛</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="chat.html">消息</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="shop.html">商店</a>
          </li>
        </ul>
      </div>
      <div class="order-2 order-lg-3 d-flex align-items-center">
        <form @submit.prevent="performSearch"> <!-- 阻止表单提交 -->
          <input 
            id="search-query" 
            name="s" 
            type="search" 
            placeholder="输入文章ID"
            v-model="searchId" 
          >
          <button type="submit" class="btn btn-search">搜索</button>
        </form>
        <button class="navbar-toggler border-0 order-1" type="button" data-toggle="collapse" data-target="#navigation">
          <i class="ti-menu"></i>
        </button>
        <ul class="navbar-nav ml-auto" v-if="userid==null">
          <li class="nav-item @@login__active">
              <a class="nav-link" href="Login.html">登录</a>
          </li>
          <li class="nav-item @@register__active">
              <a class="nav-link" href="register.html">注册</a>
          </li>
      </ul>
      <ul class="navbar-nav ml-auto 1ogined" v-else>
          <li class="nav-item @@login__active">
            <span><a class="nav-link" href="person-post.html">{{userid}}</a></span>
          </li>
          <li class="nav-item @@register__active">
              <span v-on:click.prevent="logout"><a class="nav-link" href="BBS_index.html">注销</a></span>
          </li>
      </ul>
      </div>
    </nav>
  </div>
</header>

  <script>
      new Vue({
        el: "#index",
        data: {
          userid: localStorage["userid"],
          searchId: '' // 用于存储搜索的ID
        },
        methods: {
          logout: function() {
            localStorage.clear();
            this.userid = null;
          },
          performSearch: function() {
            if (!this.searchId || this.searchId.trim() === '') {
              // 如果为空，跳转到404页面
              alert("请输入文章id")
              return;
            }
            // 存储搜索ID到localStorage
            localStorage.setItem("num", this.searchId);
            // 跳转到post.html
            location.href = "post.html";
          }
        }
      })
  </script>
<!-- /navigation -->

<section class="section-sm">
  <div class="container" >
    <div class="row align-items-center justify-content-center">
      <!-- 头像上传部分 -->
      <div class="col-lg-5 col-md-6 mb-4 mb-md-0" id="picture">
        <img 
        id="profile-image" 
        class="img-fluid w-50" 
        :src="imagePreview" 
        alt="Profile Image"
    >
      <div class="mt-3">
          <label for="avatar-upload" class="btn btn-outline-primary">更改头像</label>
          <input 
              type="file" 
              id="avatar-upload" 
              class="d-none" 
              accept="image/*"
              @change="handleImageUpload"
          >
      </div>
        <div v-if="imagePath" class="mt-2 text-muted small">
          文件路径: {{ imagePath }}
        </div>
      </div>
      
      <!-- 用户信息编辑部分 -->
      <div class="col-lg-5 col-md-6" id="information">
        <div class="content pl-lg-3 pl-0">
          <h2>修改个人信息</h2>
          
          <!-- 用户名修改 -->
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="username" 
                   v-model="formData.name" 
                   :disabled="!isEditing" 
                   placeholder="输入新名称">
        </div>
        
        <!-- 邮箱修改 -->
        <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email" 
                   v-model="formData.email" 
                   :disabled="!isEditing" 
                   placeholder="输入新邮箱">
        </div>
        
        <!-- 密码修改 -->
        <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password" 
                   v-model="formData.password" 
                   :disabled="!isEditing" 
                   placeholder="输入新密码">
        </div>
        
        <!-- 按钮区域 -->
        <button id="edit-btn" 
        class="btn btn-primary" 
        v-show="!isEditing" 
        @click="editInfo">
        更改
        </button>
        <button id="save-btn" 
        class="btn btn-success" 
        v-show="isEditing" 
        @click="saveInfo">
        保存
        </button>
      </div>

    </div>
  </div>
</section>
<script>
  var vm = new Vue({
    el: "#picture",
    data: {
        imagePreview: localStorage["relativePath"],
        imagePath: null,
        userId: localStorage["userid"],
        displayPath: 'images/person/default-avatar.jpg' // 保持相对路径
    },
    methods: {
        handleImageUpload(event) {
            const userId = localStorage["userid"]
            const file = event.target.files[0];
            if (!file) return;

            // 创建文件预览
            const reader = new FileReader();
            reader.onload = (e) => {
                this.imagePreview = e.target.result;
                this.displayPath = this.imagePreview;
            };
            reader.readAsDataURL(file);

            // 只使用相对路径
            const relativePath = `images/person/${file.name}`;
            this.imagePath = relativePath;
            
            // 调用API更新头像路径
            this.updateIconPath(userId, relativePath);
        },

        updateIconPath(userId, relativePath) {
          // 使用 encodeURIComponent 来正确编码路径
            const encodedPath = encodeURIComponent(relativePath);
            axios.post(`https://localhost:7071/api/User/changeIcon?userId=${userId}&path=${encodedPath}`)
            .then(response => {
                if (response.data) {
                    localStorage.setItem('userProfileImagePath', relativePath);
                    localStorage.setItem('userProfileDisplayPath', relativePath);
                    localStorage.setItem('relativePath', relativePath);
                    var userInfo = JSON.parse(localStorage["userInfo"]);
                    userInfo.userIcon=relativePath;
                    // localStorage.removeItem("userInfo");
                    localStorage["userInfo"] = JSON.stringify(userInfo);
                    console.log(localStorage['userInfo'].userIcon);
                    this.displayPath = relativePath;
                    console.log('头像更新成功');
                }
            })
            .catch(error => {
                console.error('更新头像失败:', error);
                alert('更新头像失败，请重试');
            });
        }
    },
    mounted() {
        // 从本地存储加载保存的路径
        const savedPath = localStorage.getItem('userProfileDisplayPath');
        if (savedPath) {
            this.imagePath = savedPath;
            this.imagePreview = savedPath;
        }
    }
});
</script>
<script>
    var vm = new Vue({
        el: "#information",
        data: {
            isEditing: false,
            formData: {
                name: '',
                email: '',
                password: '',
                phone: '',
                address: '',
                userIcon: '',
                isForbidden: false
            },
            userId: null,
            token: null,
            baseURL: 'https://localhost:7071/api'
        },

        created() {
            this.loadUserData();
        },

        methods: {
            loadUserData() {
                try {
                    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    if (userInfo) {
                        this.formData = {
                            name: userInfo.userNo || '',
                            email: userInfo.email || '',
                            password: userInfo.password || '',
                            phone: userInfo.phone || '',
                            address: userInfo.address || '',
                            userIcon: userInfo.userIcon || '',
                            isForbidden: userInfo.isForbidden || false
                        };
                        this.token = userInfo.token;
                    }
                    this.userId = localStorage.getItem('userid');
                } catch (error) {
                    console.error('加载用户数据失败:', error);
                    alert('加载用户数据失败');
                }
            },

            editInfo() {
                this.isEditing = true;
            },

            async saveInfo() {
                try {
                    // 构建用户数据对象
                    const userDataObj = {
                        id: this.userId,
                        name: this.formData.name,
                        password: this.formData.password,
                        phone: this.formData.phone,
                        email: this.formData.email,
                        address: this.formData.address,
                        token: this.token,
                        isForbidden: this.formData.isForbidden,
                        userIcon: this.formData.userIcon
                    };

                    // 将对象转换为 JSON 字符串并进行 URL 编码
                    const userJson = encodeURIComponent(JSON.stringify(userDataObj));

                    // 构建完整的 URL
                    const url = `${this.baseURL}/User?userJson=${userJson}`;

                    // 发送请求
                    const response = await axios({
                        method: 'put',
                        url: url,
                        headers: {
                            'Authorization': `Bearer ${this.token}`,
                            'Content-Type': 'application/json'
                        }
                    });

                    if (response.data) {
                        // 更新本地存储
                        localStorage.setItem('userInfo', JSON.stringify(userDataObj));
                        
                        // 重置状态
                        this.isEditing = false;
                        
                        // 提示成功
                        alert('信息更新成功');
                    }
                } catch (error) {
                    console.error('更新失败:', error);
                    alert(error.response?.data?.message || '信息更新失败');
                }
            }
        }
    });
</script>
<footer class="footer">
  <svg class="footer-border" height="214" viewBox="0 0 2204 214" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2203 213C2136.58 157.994 1942.77 -33.1996 1633.1 53.0486C1414.13 114.038 1200.92 188.208 967.765 118.127C820.12 73.7483 263.977 -143.754 0.999958 158.899"
      stroke-width="2" />
  </svg>
  
  <div class="container">
      <div class="row align-items-center">
      <div class="col-md-5 text-center text-md-left mb-4">
          <ul class="list-inline footer-list mb-0">
            <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
          </ul>
      </div>
      <div class="col-md-2 text-center mb-4">
          <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" ></a>
      </div>
      <div class="col-12">
          <div class="border-bottom border-default"></div>
      </div>
      </div>
  </div>
  </footer>


  <!-- JS Plugins -->
  <script src="plugins/jQuery/jquery.min.js"></script>

  <script src="plugins/bootstrap/bootstrap.js"></script>

  <script src="plugins/slick/slick.min.js"></script>

  <script src="plugins/instafeed/instafeed.min.js"></script>
  <!-- Main Script -->
  <script src="js/script.js"></script>
</body>
</html>